<template>
	<view v-if="display">
		<!-- 商品列表 -->
		<view class="goods-list">
			<view class="tis" v-if="goodsList.length==0">
				<image src="../../static/empty/cart.png" mode="aspectFit" style="width: 100%;margin-top: 25%;"></image>
				<text style="font-size: 14px;color: #999;">购物车是空的哦~</text>
			</view>
			<view v-else class="row" v-for="(row,index) in goodsList" :key="index">
				<!-- 删除按钮 -->
				<view class="menu" @tap.stop="deleteGoods(row.cart_id)">
					删除
				</view>
				<!-- 商品 -->
				<view class="carrier" :class="[theIndex==index?'open':oldIndex==index?'close':'']"
					@touchstart="touchStart(index,$event)" @touchmove="touchMove(index,$event)"
					@touchend="touchEnd(index,$event)">
					<!-- checkbox -->
					<view class="checkbox-box" @tap="selected(index)">
						<view class="checkbox">
							<view :class="[row.selected?'on':'']"></view>
						</view>
					</view>
					<!-- 商品信息 -->
					<view class="goods-info">
						<view class="img">
							<image :src="row.sku_image"></image>
						</view>
						<view class="info">
							<view class="title">{{row.goods_name}}</view>
							<view class="spec" v-if="row.spec_name">规格：{{row.spec_name}}</view>
							<view class="price-number">
								<view class="price">￥{{(row.price/100).toFixed(2)}}</view>
								<view class="number">
									<view class="sub" @click="sub(index)">
										－
									</view>
									<view class="input">
										<input type="number" v-model="row.num" @input="sum($event,index)" />
									</view>
									<view class="add" @click="add(index)">
										＋
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 脚部菜单 -->
		<view class="footer" v-if="goodsList.length>0">
			<view class="checkbox-box" @click="allSelect">
				<view class="checkbox">
					<view :class="[isAllselected?'on':'']"></view>
				</view>
				<view class="text">全选</view>
			</view>
			<view class="delBtn" @click="deleteList" v-if="selectedList.length>0">删除</view>
			<view class="settlement">
				<view class="sum">合计:<view class="money">￥{{sumPrice}}</view>
				</view>
				<view class="btn" @click="toConfirmation">结算({{selectedList.length}})</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sumPrice: '0.00',
				selectedList: [],
				isAllselected: false,
				goodsList: [],
				//控制滑动效果
				theIndex: null,
				oldIndex: null,
				isStop: false,
				display: false
			}
		},
		onShow() {
			this.$http.post('Cart/list', {
				loading: 'hide'
			}).then((res) => {
				this.goodsList = res.data.data;
				this.display = true;
			})
			this.selectedList = [];
			this.isAllselected = false;
			this.sumPrice = '0.00';
		},
		methods: {
			//控制左滑删除效果-begin
			touchStart(index, event) {
				//多点触控不触发
				if (event.touches.length > 1) {
					this.isStop = true;
					return;
				}
				this.oldIndex = this.theIndex;
				this.theIndex = null;
				//初始坐标
				this.initXY = [event.touches[0].pageX, event.touches[0].pageY];
			},
			touchMove(index, event) {
				//多点触控不触发
				if (event.touches.length > 1) {
					this.isStop = true;
					return;
				}
				let moveX = event.touches[0].pageX - this.initXY[0];
				let moveY = event.touches[0].pageY - this.initXY[1];

				if (this.isStop || Math.abs(moveX) < 5) {
					return;
				}
				if (Math.abs(moveY) > Math.abs(moveX)) {
					// 竖向滑动-不触发左滑效果
					this.isStop = true;
					return;
				}

				if (moveX < 0) {
					this.theIndex = index;
					this.isStop = true;
				} else if (moveX > 0) {
					if (this.theIndex != null && this.oldIndex == this.theIndex) {
						this.oldIndex = index;
						this.theIndex = null;
						this.isStop = true;
						setTimeout(() => {
							this.oldIndex = null;
						}, 150)
					}
				}
			},
			touchEnd(index, $event) {
				//结束禁止触发效果
				this.isStop = false;
			},
			//控制左滑删除效果-end

			//跳转确认订单页面
			toConfirmation() {
				let tmpList = [];
				let len = this.goodsList.length;
				for (let i = 0; i < len; i++) {
					if (this.goodsList[i].selected) {
						tmpList.push(this.goodsList[i]);
					}
				}
				if (tmpList.length < 1) {
					this.toast('请选择结算商品');
					return;
				}
				this.navTo('/pages/order/makeorder', tmpList, true);
			},
			//删除商品
			deleteGoods(cart_id) {
				let len = this.goodsList.length;
				for (let i = 0; i < len; i++) {
					if (cart_id == this.goodsList[i].cart_id) {
						this.goodsList.splice(i, 1);
						break;
					}
				}
				this.$http.post('Cart/delete', {
					cart_id: cart_id
				}).then((res) => {
					if (res.data.code == 0) {
						this.selectedList.splice(this.selectedList.indexOf(cart_id), 1);
						this.sum();
						this.oldIndex = null;
						this.theIndex = null;
					}
				})

			},
			// 批量删除商品
			deleteList() {
				var that = this;
				uni.showModal({
					title: '删除提示',
					content: '确定删除选中的商品吗？',
					success: function(res) {
						if (res.confirm) {
							let len = that.selectedList.length;
							if (len > 0) {
								for (var i = 0; i < len; i++) {
									that.deleteGoods(that.selectedList[i]);
								}
							}
							that.selectedList = [];
							that.isAllselected = that.selectedList.length == that.goodsList.length && that
								.goodsList.length > 0;
							that.sum();
						}
					}
				})
			},
			// 选中商品
			selected(index) {
				this.goodsList[index].selected = this.goodsList[index].selected ? false : true;
				let i = this.selectedList.indexOf(this.goodsList[index].cart_id);
				i > -1 ? this.selectedList.splice(i, 1) : this.selectedList.push(this.goodsList[index].cart_id);
				this.isAllselected = this.selectedList.length == this.goodsList.length;
				this.sum();
			},
			//全选
			allSelect() {
				let len = this.goodsList.length;
				let arr = [];
				for (let i = 0; i < len; i++) {
					this.goodsList[i].selected = this.isAllselected ? false : true;
					arr.push(this.goodsList[i].cart_id);
				}
				this.selectedList = this.isAllselected ? [] : arr;
				this.isAllselected = this.isAllselected || this.goodsList.length == 0 ? false : true;
				this.sum();
			},
			// 减少数量
			sub(index) {
				if (this.goodsList[index].num <= 1) {
					return;
				}
				this.$http.post('Cart/add', {
					sku_id: this.goodsList[index].sku_id,
					num: 1,
					action: 'dec'
				}).then((res) => {
					if (res.data.code == 0) {
						this.goodsList[index].num--;
						this.sum();
					}
				})
			},
			// 增加数量
			add(index) {
				this.$http.post('Cart/add', {
					sku_id: this.goodsList[index].sku_id,
					num: 1,
					action: 'inc'
				}).then((res) => {
					if (res.data.code == 0) {
						this.goodsList[index].num++;
						this.sum();
					}
				})
			},
			// 合计
			sum(e, index) {
				this.sumPrice = 0;
				let len = this.goodsList.length;
				for (let i = 0; i < len; i++) {
					if (this.goodsList[i].selected) {
						if (e && i == index) {
							this.sumPrice = this.sumPrice + (e.detail.value * this.goodsList[i].price);
						} else {
							this.sumPrice = this.sumPrice + (this.goodsList[i].num * this.goodsList[i].price);
						}
					}
				}
				this.sumPrice = (this.sumPrice / 100).toFixed(2);
			},
		}
	}
</script>
<style lang="scss">
	page {
		position: relative;
		background-color: #fbfbfb;
	}

	.checkbox-box {
		display: flex;
		align-items: center;

		.checkbox {
			width: 35upx;
			height: 35upx;
			border-radius: 100%;
			border: solid 2upx #f06c7a;
			display: flex;
			justify-content: center;
			align-items: center;

			.on {
				width: 25upx;
				height: 25upx;
				border-radius: 100%;
				background-color: #f06c7a;
			}
		}

		.text {
			font-size: 28upx;
			margin-left: 10upx;
		}
	}

	.status {
		width: 100%;
		height: 0;
		position: fixed;
		z-index: 10;
		background-color: #fff;
		top: 0;
		/*  #ifdef  APP-PLUS  */
		height: var(--status-bar-height); //覆盖样式
		/*  #endif  */
	}

	.header {
		width: 92%;
		padding: 0 4%;
		height: 100upx;
		display: flex;
		align-items: center;
		position: fixed;
		top: 0;
		z-index: 10;
		background-color: #fff;
		/*  #ifdef  APP-PLUS  */
		top: var(--status-bar-height);

		/*  #endif  */
		.title {
			font-size: 36upx;
		}

	}

	.place {

		background-color: #ffffff;
		height: 100upx;
		/*  #ifdef  APP-PLUS  */
		margin-top: var(--status-bar-height);
		/*  #endif  */
	}

	.goods-list {
		width: 100%;
		padding: 20upx 0 120upx 0;

		.tis {
			width: 100%;
			height: 60upx;
			font-size: 32upx;
			color: #666;
			text-align: center;
		}

		.row {
			width: calc(92%);
			height: calc(22vw + 40upx);
			margin: 20upx auto;
			border-radius: 8upx;
			box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1);
			display: flex;
			align-items: center;
			position: relative;
			overflow: hidden;
			z-index: 4;

			.menu {
				.icon {
					color: #fff;
				}

				border-radius: 10upx;
				position: absolute;
				width: 30%;
				height: 100%;
				right: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: red;
				color: #fff;
				z-index: 2;
			}

			.carrier {
				@keyframes showMenu {
					0% {
						transform: translateX(0);
					}

					100% {
						transform: translateX(-30%);
					}
				}

				@keyframes closeMenu {
					0% {
						transform: translateX(-30%);
					}

					100% {
						transform: translateX(0);
					}
				}

				&.open {
					animation: showMenu 0.25s linear both;
				}

				&.close {
					animation: closeMenu 0.15s linear both;
				}

				background-color: #fff;

				.checkbox-box {
					padding-left: 20upx;
					flex-shrink: 0;
					height: 22vw;
					margin-right: 20upx;
				}

				position: absolute;
				width: 100%;
				padding: 0 0;
				height: 100%;
				z-index: 3;
				display: flex;
				align-items: center;

				.goods-info {
					width: 100%;
					display: flex;
					padding-right: 20upx;

					.img {
						width: 22vw;
						height: 22vw;
						border-radius: 10upx;
						overflow: hidden;
						flex-shrink: 0;
						margin-right: 10upx;

						image {
							width: 22vw;
							height: 22vw;
						}
					}

					.info {
						width: 100%;
						height: 22vw;
						overflow: hidden;
						flex-wrap: wrap;
						// position: relative;

						.title {
							font-size: 28upx;
							height: 37px;
							word-break: break-all;
							text-overflow: ellipsis;
							overflow: hidden;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							width: 90%;
						}

						.spec {
							font-size: 20rpx;
							color: #a7a7a7;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							width: 89%;
							margin-top: 5px;
						}

						.price-number {
							position: absolute;
							width: 100%;
							bottom: 0rpx;
							font-size: 28rpx;
							height: 60rpx;

							.price {
								font-weight: bold;
								color: #ff0000;
								float: left;
							}

							.number {
								display: flex;
								margin-left: 40%;

								.input {
									width: 45upx;
									height: 45upx;
									margin: 0 10upx;
									background-color: #f3f3f3;

									input {
										width: 45upx;
										height: 45upx;
										display: flex;
										justify-content: center;
										align-items: center;
										text-align: center;
										font-size: 26upx;
									}
								}

								.sub,
								.add {
									width: 45upx;
									height: 45upx;
									background-color: #f3f3f3;
									border-radius: 5upx;
									text-align: center;
								}
							}
						}
					}
				}
			}
		}
	}

	.footer {
		width: 100%;
		padding: 0 4%;
		background-color: #FFFFFF;
		height: 100upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28upx;
		position: fixed;
		bottom: 0upx;
		z-index: 5;

		.delBtn {
			color: #f06c7a;
			padding: 0 30upx;
			height: 50upx;
			border-radius: 30upx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.settlement {
			width: 60%;
			display: flex;
			justify-content: flex-end;
			align-items: center;

			.sum {
				width: 50%;
				font-size: 28upx;
				margin-right: 10upx;
				display: flex;
				justify-content: flex-end;

				.money {
					font-weight: 600;
				}
			}

			.btn {
				padding: 0 30upx;
				height: 50upx;
				background-color: #f06c7a;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;

				border-radius: 30upx;
			}
		}
	}
</style>
